<template>
  <div>
    <p style="margin: 20px;font-size: 2em;font-weight: bolder;font-family: '微软雅黑',serif;color: #909399">店铺入驻</p>
    <el-row>
      <el-col :span="22" :push="1">
        <el-steps :active="active" finish-status="success">
          <el-step title="企业资质信息"></el-step>
          <el-step title="财务资质信息"></el-step>
          <el-step title="其他信息"></el-step>
          <el-step title="提交审核"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <div v-if="active===1">
      <el-form ref="elForm1" :model="formData" :rules="rules" size="medium" label-width="120px">
      <p style="line-height: 50px;padding-left: 20px;margin: 20px;background-color: #F2F6FC;font-weight: bolder;height: 50px;border: 1px solid #DCDFE6">基础信息</p>
      <div>
          <el-form-item label="公司名称" prop="corporateName">
            <el-input v-model="formData.corporateName" placeholder="请输入公司名称" clearable :style="{width: '50%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="公司所在地" prop="corporateUrl">
            <el-input v-model="formData.corporateUrl" placeholder="请输入公司所在地" clearable :style="{width: '50%'}"></el-input>
          </el-form-item>
          <el-form-item label="公司详细地址" prop="corporateAddress">
            <el-input v-model="formData.corporateAddress" placeholder="请输入公司详细地址" clearable
                      :style="{width: '50%'}"></el-input>
          </el-form-item>
          <el-form-item label="员工总数" prop="corporateCount">
            <el-input v-model="formData.corporateCount" placeholder="请输入员工总数" clearable :style="{width: '50%'}">
              <template slot="append">人</template>
            </el-input>
          </el-form-item>
          <el-form-item label="公司电话" prop="corporatePhone">
            <el-input v-model="formData.corporatePhone" placeholder="请输入公司电话" :maxlength="11" show-word-limit clearable :style="{width: '50%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="注册资金" prop="registeredCapital">
            <el-input v-model="formData.registeredCapital" placeholder="请输入注册资金" clearable
                      :style="{width: '50%'}">
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="联系人姓名" prop="contactName">
            <el-input v-model="formData.contactName" placeholder="请输入联系人姓名" clearable :style="{width: '50%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="联系人电话" prop="contactPhone">
            <el-input v-model="formData.contactPhone" placeholder="请输入联系人电话" :maxlength="11" show-word-limit clearable :style="{width: '50%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="contactEmail">
            <el-input v-model="formData.contactEmail" placeholder="请输入电子邮箱" clearable :style="{width: '50%'}">
            </el-input>
          </el-form-item>
      </div>
      <p style="line-height: 50px;padding-left: 20px;margin: 20px;background-color: #F2F6FC;font-weight: bolder;height: 50px;border: 1px solid #DCDFE6">营业执照信息</p>
      <div>
        <el-row :gutter="15">
            <el-col :span="14">
              <el-form-item label="营业执照号" prop="licenseNumber">
                <el-input v-model="formData.licenseNumber" placeholder="请输入营业执照号" :maxlength="18" show-word-limit
                          clearable prefix-icon='el-icon-mobile' suffix-icon='el-icon-s-cooperation'
                          :style="{width: '93%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="法定经营范围" prop="businessScope">
                <el-input v-model="formData.businessScope" type="textarea" placeholder="请输入法定经营范围"
                          :autosize="{minRows: 4, maxRows: 6}" :style="{width: '93%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="营业执照电子版" prop="shopELicense">
                <image-upload v-model="formData.shopELicense"/>
              </el-form-item>
            </el-col>
        </el-row>
      </div>
      <p style="line-height: 50px;padding-left: 20px;margin: 20px;background-color: #F2F6FC;font-weight: bolder;height: 50px;border: 1px solid #DCDFE6">法人信息</p>
      <div>
        <el-row :gutter="15">
            <el-col :span="15">
              <el-form-item label="法人姓名" prop="legalPersonName">
                <el-input v-model="formData.legalPersonName" placeholder="请输入法人姓名" clearable :style="{width: '87%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="法人证件号" prop="legalPersonDocument">
                <el-input v-model="formData.legalPersonDocument" placeholder="请输入法人证件号" clearable :style="{width: '87%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="法人证件电子版" prop="legalPersonImage">
                <image-upload v-model="formData.legalPersonImage"/>
              </el-form-item>
            </el-col>
        </el-row>
      </div>
      </el-form>
    </div>
    <div v-if="active===2">
      <p style="line-height: 50px;padding-left: 20px;margin: 20px;background-color: #F2F6FC;font-weight: bolder;height: 50px;border: 1px solid #DCDFE6">基础信息</p>
      <div>
        <el-form ref="elForm2" :model="formData" :rules="rules" size="medium" label-width="120px">
          <el-form-item label="银行开户名" prop="bankAccountName">
            <el-input v-model="formData.bankAccountName" placeholder="请输入银行开户名" clearable
                      :style="{width: '50%'}"></el-input>
          </el-form-item>
          <el-form-item label="银行账号" prop="bankAccount">
            <el-input v-model="formData.bankAccount" :maxlength="19" placeholder="请输入银行账号" clearable :style="{width: '50%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="开户行支行名称" prop="subBranch">
            <el-input v-model="formData.subBranch" placeholder="请输入开户行支行名称" clearable :style="{width: '50%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="支行联行号" prop="lineNumber">
            <el-input v-model="formData.lineNumber" placeholder="请输入支行联行号" clearable :style="{width: '50%'}">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-if="active===3">
      <p style="line-height: 50px;padding-left: 20px;margin: 20px;background-color: #F2F6FC;font-weight: bolder;height: 50px;border: 1px solid #DCDFE6">基础信息</p>
      <div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
          <el-form-item label="店铺名称" prop="shopName">
            <el-input v-model="formData.shopName" placeholder="请输入单行文本店铺名称" clearable :style="{width: '50%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="店铺logo" prop="shopLogo">
            <image-upload v-model="formData.shopLogo"/>
          </el-form-item>
          <el-form-item label="店铺负责人" prop="shopUser">
            <el-input v-model="formData.shopUser" placeholder="请输入店铺负责人姓名" clearable :style="{width: '50%'}"/>
          </el-form-item>
          <el-form-item label="店铺经营类目" prop="mainProducts">
            <el-input v-model="formData.mainProducts" placeholder="请输入店铺主营产品, 产品与产品之间用半角逗号隔开" clearable :style="{width: '50%'}"/>
          </el-form-item>
          <el-form-item label="店铺所在地" prop="shopUrl">
            <el-input v-model="formData.shopUrl" placeholder="请输入店铺所在地" clearable :style="{width: '50%'}"></el-input>
          </el-form-item>
          <el-form-item label="店铺详细地址" prop="shopAddress">
            <el-input v-model="formData.shopAddress" placeholder="请输入店铺详细地址" clearable :style="{width: '50%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="店铺简介" prop="shopIntroduction">
            <el-input v-model="formData.shopIntroduction" type="textarea" placeholder="请输入店铺简介" :autosize="{minRows: 4, maxRows: 4}" :style="{width: '50%'}"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-if="active===4" style="margin-top: 200px;text-align: center;font-size: 2em;color: #67C23A">入驻申请提交成功，等待平台审核</div>
    <el-col :push="10">
      <el-button v-if="active===1" type="primary" style="margin-top: 12px;" @click="submitForm1">填写财务资质信息</el-button>
      <el-button v-if="active===2||active===3" type="info" style="margin-top: 12px;" @click="last">上一步</el-button>
      <el-button v-if="active===2" type="primary" style="margin-top: 12px;" @click="submitForm2">填写其他信息</el-button>
      <el-button v-if="active===3" type="primary" style="margin-top: 12px;" @click="submitForm">提交平台审核</el-button>
    </el-col>
    <div style="margin: 20px;color: transparent">-</div>
  </div>
</template>
<script>
import {addApply} from "@/api/shop/apply";

export default {
  components: {},
  props: [],
  data() {
    return {
      //步骤条
      active: 1,
      //表单
      formData: {
        shopName: '',
        shopLogo: null,
        shopUser:"",
        mainProducts: "",
        shopUrl: "",
        shopAddress: "",
        shopIntroduction: '',
        bankAccountName: '',
        bankAccount: '',
        subBranch: '',
        lineNumber: '',
        legalPersonName: '',
        legalPersonDocument: '',
        legalPersonImage: null,
        corporateName: '',
        corporateUrl: "",
        corporateAddress: '',
        corporateCount: '',
        corporatePhone: '',
        registeredCapital: '',
        contactName: '',
        contactPhone: '',
        contactEmail: '',
        licenseNumber: '',
        businessScope: '',
        shopELicense: null,
      },
      rules: {
        shopName: [{
          required: true,
          message: '请输入单行文本店铺名称',
          trigger: 'blur'
        }],
        mainProducts: [{
          required: false,
          message: '请至少填写一个产品',
          trigger: 'blur'
        }],
        shopUrl: [{
          required: true,
          message: '请至少填写一个地区',
          trigger: 'blur'
        }],
        shopUser: [{
          required: true,
          message: '请至少填写一个名字',
          trigger: 'blur'
        }],
        shopAddress: [{
          required: true,
          message: '请输入店铺详细地址',
          trigger: 'blur'
        }],
        shopIntroduction: [{
          required: true,
          message: '请输入店铺简介',
          trigger: 'blur'
        }],
        bankAccountName: [{
          required: true,
          message: '请输入银行开户名',
          trigger: 'blur'
        }],
        bankAccount: [{
          required: true,
          message: '请输入银行账号',
          trigger: 'blur'
        }],
        subBranch: [{
          required: true,
          message: '请输入开户行支行名称',
          trigger: 'blur'
        }],
        lineNumber: [{
          required: true,
          message: '请输入支行联行号',
          trigger: 'blur'
        }],
        legalPersonName: [{
          required: true,
          message: '请输入法人姓名',
          trigger: 'blur'
        }],
        legalPersonDocument: [{
          required: true,
          message: '请输入法人证件号',
          trigger: 'blur'
        }],
        corporateName: [{
          required: true,
          message: '请输入公司名称',
          trigger: 'blur'
        }],
        corporateUrl: [{
          required: true,
          message: '请至少选择一个地区',
          trigger: 'blur'
        }],
        corporateAddress: [{
          required: true,
          message: '请输入公司详细地址',
          trigger: 'blur'
        }],
        corporateCount: [{
          required: true,
          message: '请输入员工总数',
          trigger: 'blur'
        }, {
          pattern: /^\d+$/,
          message: '只能填写数字',
          trigger: 'blur'
        }],
        corporatePhone: [{
          required: true,
          message: '请输入公司电话',
          trigger: 'blur'
        }, {
          pattern: /^\d{11}$/,
          message: '请输入正确的电话号码',
          trigger: 'blur'
        }],
        registeredCapital: [{
          required: true,
          message: '请输入注册资金',
          trigger: 'blur'
        }, {
          pattern: /^\d+(.\d+)*$/,
          message: '',
          trigger: 'blur'
        }],
        contactName: [{
          required: true,
          message: '请输入联系人姓名',
          trigger: 'blur'
        }],
        contactPhone: [{
          required: true,
          message: '请输入联系人电话',
          trigger: 'blur'
        }, {
          pattern: /^\d{11}$/,
          message: '请输入正确电话号码',
          trigger: 'blur'
        }],
        contactEmail: [{
          required: true,
          message: '请输入电子邮箱',
          trigger: 'blur'
        }, {
          pattern: /^\w+@\w+.\w+$/,
          message: '',
          trigger: 'blur'
        }],
        licenseNumber: [{
          required: true,
          message: '请输入营业执照号',
          trigger: 'blur'
        }, /*{
          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
          message: '营业执照号格式错误',
          trigger: 'blur'
        }*/],
        businessScope: [{
          required: true,
          message: '请输入法定经营范围',
          trigger: 'blur'
        }],
      },
      mainProductsOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      shopUrlOptions: [{
        "label": "贵州",
        "value": 1,
        "children":[{
          "label": "贵阳",
          "value": 2,
          "children":undefined}]
      }],
      shopUrlProps: {
        "multiple": false
      },
      corporateUrlOptions: [{
        "label": "贵州",
        "value": 1,
        "children":[{
          "label": "贵阳",
          "value": 2,
          "children":undefined}]
      }],
      corporateUrlProps: {
        "multiple": false
      },
    };
  },

  methods: {
    submitForm1() {
      this.$refs['elForm1'].validate(valid => {
        if (valid) {
          this.next();
        }
      })
    },
    submitForm2() {
      this.$refs['elForm2'].validate(valid => {
        if (valid) {
          this.next();
        }
      })
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        addApply(this.formData).then(() => {
          this.next()
        });
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    next() {
      if (this.active++ > 3) this.active = 4;
    },
    last() {
      if (this.active-- < 1) this.active = 1;
    },
  }
}
</script>
<style>
</style>
